<template>
  <div class="order-con">
    <div class="w">
      <BackTitle title="我的订单" :backgroundColor="{backgroundColor: '#f2f2f2'}"></BackTitle>
      <van-tabs v-model="active" animated>
        <van-tab title="全部订单">
          <NoList v-if="orderList.length===0"></NoList>
          <OrderItem v-for="(item,index) in orderList" :key="index" :list="item" v-else> </OrderItem>
        </van-tab>
        <van-tab title="未支付">
          <NoList v-if="needPayOrder.length===0"></NoList>
          <OrderItem v-for="(item,index) in needPayOrder" :key="index" :list="item" v-else></OrderItem>
        </van-tab>
        <van-tab title="未收货">
          <NoList v-if="okOrder.length===0"></NoList>
          <OrderItem v-for="(item,index) in okOrder" :key="index" :list="item" v-else></OrderItem>
        </van-tab>
      </van-tabs>
    </div>

  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Order',
  data() {
    return {
      active: 0
    }
  },

  computed: {
    ...mapState(['orderList']),
    ...mapGetters(['needPayOrder', 'okOrder'])
  }
}
</script>

<style lang="less" scoped>
.order-con {
  font-size: 28px;
  .w {
    width: 720px;
    margin: 0 auto;
  }
}
</style>
<style scoped>
/deep/ .van-tabs--line .van-tabs__wrap {
  height: 84px;
  border-bottom: 20px solid RGBA(245, 245, 245, 1);
}
/deep/ .van-tab__text--ellipsis {
  overflow: visible;
}
/deep/ .van-tab {
  font-size: 28px;
}
/deep/ .van-tab--active {
  color: #ff6700;
  font-weight: 700;
}
</style>
